<script setup>
import { ref } from 'vue'
const list = ref([
  {
    name: '文旅观光',
    gid: 'hangxian-1',
    color: '#f8fb00'
  },
  {
    name: '载人通勤',
    gid: 'hangxian-2',
    color: '#007eff'
  },
  {
    name: '物流运输',
    gid: 'hangxian-3',
    color: '#00cc66'
  },
  {
    name: '政务巡检',
    gid: 'hangxian-4',
    color: '#FFB340'
  }
])
const airspace = ref(['文旅观光', '载人通勤', '物流运输', '政务巡检', '飞行验证'])
const choseAirspace = (item) => {
  let pos = airspace.value.indexOf(item.name)
  if (pos > -1) {
    airspace.value.splice(pos, 1)
    __g.infoTree.hideByGroupId(item.gid)
  } else {
    airspace.value.push(item.name)
    __g.infoTree.showByGroupId(item.gid)
  }
}
</script>
<template>
  <div class="legendbox">
    <p v-for="(item, index) in list" :key="index" @click="choseAirspace(item)">
      <span :style="{ background: item.color }"></span>
      <span class="name">{{ item.name }}</span>
      <img v-if="airspace.includes(item.name)" src="@img/management/open.png" alt="" />
      <img v-else src="@img/management/close.png" alt="" />
    </p>
  </div>
</template>
<style scoped lang="scss">
.legendbox {
  position: absolute;
  width: 170px;
  right: 380px;
  bottom: 30px;
  padding: 10px;
  background: url('@img/management/legend_bg01.png');
  background-size: 100% 100%;

  p {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    color: #b3d9ff;
    font-size: 15px;
    font-weight: 300;
    margin: 8px 0;

    img {
      width: 25px;
      height: 25px;
      margin-top: 2px;
      cursor: pointer;

      &:last-child {
        width: 25px;
        height: 14px;
        margin-left: 10px;
      }
    }

    span:first-child {
      flex: 0 0 20px;
      height: 8px;
    }

    .name {
      flex: 0 0 90px;
      margin-left: 5px;
    }
  }
}
</style>
